<template>
  <div class="main-content policy-wrapper">
    <div class="content-box">
      <div class="top-box">
        <div class="title-box">
          <p class="title">政策设置1</p>
          <el-button
            type="primary"
            text
            @click="$router.push({ name: 'logger', query: { logType: 9 } })">
            政策调整记录
          </el-button>
        </div>

        <el-button
          type="primary"
          @click="addFn">
          新增
        </el-button>
      </div>

      <ct-table :options="tableOptions">
        <template v-slot:index="scope">
          <span>{{ scope.row.index }}</span>
        </template>
        <template v-slot:level="scope">
          <span>{{ scope.row.level === 1 ? '一级' : '二级' }}</span>
        </template>
        <template v-slot:operate="scope">
          <el-text
            type="primary"
            @click="editFn(scope.row)">
            编辑
          </el-text>
          <el-text
            type="primary"
            @click="deleteFn(scope.row)">
            删除
          </el-text>
        </template>
      </ct-table>

      <ct-pagination
        :options="pageOptions"
        :pageEvent="getListData">
      </ct-pagination>
    </div>

    <AddOrEditPolicy
      v-model:show="operateData.show"
      :data="operateData.data"
      v-if="operateData.show"
      @updateList="getListData" />

    <DeletePolicy
      v-model:show="showDelete"
      :id="deleteId"
      v-if="showDelete"
      @updateList="getListData" />
  </div>
</template>

<script setup>
  import { getPolicySettingList, removePolicySetting } from '@/api';

  const { proxy } = getCurrentInstance();

  import CtTable from '@/components/CtTable.vue';
  import CtPagination from '@/components/Pagination.vue';
  import AddOrEditPolicy from './dialog/AddOrEditPolicy.vue';
  import DeletePolicy from './dialog/DeletePolicy.vue';

  import { usePageOptions } from '@/hooks/usePageOptions';
  const { pageOptions } = usePageOptions();

  let tableOptions = reactive({
    data: [],
    loading: false,
    columns: [
      {
        label: '序号',
        prop: 'index',
        width: 80,
        isCustom: true
      },
      {
        label: '伙伴层级',
        prop: 'level',
        isCustom: true
      },
      {
        label: '伙伴等级',
        prop: 'partnerLevel'
      },
      {
        label: '充值阶梯（万元）',
        prop: 'stepName'
      },
      {
        label: '预设折扣',
        prop: 'discountRatio'
      },
      // {
      //   label: '预设激励',
      //   prop: 'incentiveRatio'
      // },
      {
        label: '操作',
        prop: 'operate',
        width: 160,
        isCustom: true
      }
    ]
  });

  function getListData() {
    tableOptions.loading = true;
    const { currentPage, pageSize } = pageOptions;

    getPolicySettingList({
      page: currentPage ,
      pageSize
    })
      .then(res => {
        const { content, totalElements } = res.data;
        if (rows.length) {
          for (let i = 0; i < rows.length; i++) {
            content[i].index = proxy.$handleIndex(i, pageOptions);
          }
        }
        tableOptions.data = content;
        tableOptions.loading = false;
        pageOptions.total = totalElements;
        console.log(res);
      })
      .catch(() => {
        tableOptions.loading = false;
      });
  }

  // 新增/修改
  let operateData = reactive({
    show: false,
    data: {
      type: 1
    }
  });

  function addFn() {
    operateData.show = true;
    operateData.data = {
      type: 1
    };
  }

  function editFn(item) {
    operateData.show = true;
    operateData.data = {
      id: item.id,
      info: item,
      type: 2
    };
  }

  // 删除
  let showDelete = ref(false);
  let deleteId = ref(null);

  function deleteFn(item) {
    deleteId.value = item.id;
    showDelete.value = true;
  }

  onMounted(() => {
    getListData();
  });
</script>

<style lang="scss" scoped>
  .policy-wrapper {
    .content-box {
      .top-box {
        margin-bottom: 20px;
        .title-box {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          .title {
            font-size: 18px;
          }
        }
      }
    }
  }
</style>
